import React, { Component } from "react"
import  { Link, browserHistory } from 'react-router'
import fetchData from '../../util/fetch'
import { Tabs, Carousel } from 'antd'
const TabPane = Tabs.TabPane;
import { getUrl } from '../../util/function'
class MotherShare extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			title: "服务",
			homelist: [],
			banner: null,
			starMomShare: null,//星妈分享
			starMomShareList: null,//星妈分享列表
			starMomPageIndex: 0,
			sweetMomShare: null,//馨妈分享
			sweetMomShareList: null,//馨妈分享列表
			sweetMomPageIndex: 0,
			defKey: '1'
		}
	}
	
	callback(key) {
		console.log(key);
	}
	
	getData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data)
			switch (opts.str) {
				case '5-1':
					this.setState({
						starMomShare: data
					});
					break;
				case '5-1-1':
					console.log("新妈列表", data);
					this.startMomPageTotal = Math.ceil(data ? data.length / 4 : 0);
					this.setState({
						starMomShareList: data
					});
					break;
				case '5-2':
					this.setState({
						sweetMomShare: data
					});
					break;
				case '5-2-1':
					console.log("馨妈列表", data);
					this.sweetMomPageTotal = Math.ceil(data ? data.length / 4 : 0);
					this.setState({
						sweetMomShareList: data
					});
					break;
			}
		}.bind(this))
	}
	
	getBannerData(url, opts) {
		fetchData(url, opts, function (res) {
			let data = eval(res.data);
			this.setState({
				banner: data
			});
		}.bind(this));
	}
	
	componentDidMount() {
		
		//banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
		this.getBannerData('/crm/api/v1/web/banner/findOneByType', { "dataId": 5 });
		// 5-1	星妈分享
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "5-1" });
		// 5-1-1	星妈分享列表
		this.getData('/crm/api/v1/web/news/findListByType', { "str": "5-1-1" });
		// 5-2	馨妈分享
		this.getData('/crm/api/v1/web/news/findOneByType', { "str": "5-2" });
		// 5-2-1	馨妈分享列表
		this.getData('/crm/api/v1/web/news/findListByType', { "str": "5-2-1" });
	}
	
	renderItems(item) {
		let DataItem = [];
		let settings = {
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			autoplay: true,
			arrows: true,
			dots: false,
			speed: 300,
			variableWidth: true
		}
		if (!item || item.length == 0) {
			return null;
		} else {
			return (
				<div className="tabImg-Box motherTabBox">
					<Carousel {...settings}>
						{DataItem = item.map((val, i) => {
							return (
								<Link to={`/detail?id=${val.id}`}
								      className="col-md-4"
								      key={i}
								      style={{ width: "212px" }}>
									<img src={val.img1Url}/>
									<p>{val.title}</p>
								</Link>
							)
							{/*console.log(val.img1Url);*/}
						})}
					</Carousel>
				</div>
			)
		}
	}
	
	render() {
        const defKey = this.props.params.defKey;
		return (
			<div className="motherShare">
				<div className="activity-banner"><img src={this.state.banner ? this.state.banner.imgUrl : null}/></div>
				<div className="activity-content tab">
					<Tabs defaultActiveKey={defKey} key={defKey} type="card" onChange={this.callback.bind(this)}>
						<TabPane tab={
							<Link to="/motherShare/1">{this.state.starMomShare ? this.state.starMomShare.title : '星妈分享'}</Link>} key="1">
							{this.renderItems(this.state.starMomShareList)}
						</TabPane>
						<TabPane tab={
							<Link to="/motherShare/2">{ this.state.sweetMomShare ? this.state.sweetMomShare.title : '馨妈分享'}</Link>} key="2">
							{this.renderItems(this.state.sweetMomShareList)}
						</TabPane>
					</Tabs>
				</div>
			</div>
		)
	}
}

export default MotherShare ;
